<!-- fileName: Discover -->
<template>
  <div>
    <el-tabs v-model="tabName">
      <el-tab-pane label="个性推荐" name="first">
        <!--        <el-card shadow="never" style="overflow-y: auto;">-->
        <!--          <div class="content">-->
        <!--            <input type="checkbox" id="check" class="handle">-->
        <!--            <div class="text">-->
        <!--              <label class="btn" for="check"></label>-->
        <!--              &lt;!&ndash; 将进酒 &ndash;&gt;-->
        <!--              君不见黄河之水天上来,奔流到海不复回。君不见高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。烹羊宰牛且为乐,会须一饮三百杯。岑夫子,丹丘生,将进酒,君莫停。与君歌一曲,请君为我侧耳听。钟鼓馔玉不足贵,但愿长醉不愿醒。古来圣贤皆寂寞,惟有饮者留其名。陈王昔时宴平乐,斗酒十千恣欢谑。主人何为言少钱,径须沽取对君酌。五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。-->
        <!--            </div>-->
        <!--          </div>-->

        <!-- Banner -->
        <carousel></carousel>

        <!-- 推荐歌单 -->
        <recommend-song></recommend-song>
        <!-- 独家放送 -->
        <private-content></private-content>
        <!-- 最新音乐 -->
        <new-music></new-music>
        <!-- 推荐MV -->
        <recommend-mv></recommend-mv>
        <!-- 主播电台 -->
        <news-radio></news-radio>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="second">歌单</el-tab-pane>
      <el-tab-pane label="主播电台" name="third">主播电台</el-tab-pane>
      <el-tab-pane label="排行榜" name="fourth">排行榜</el-tab-pane>
      <el-tab-pane label="歌手" name="five">歌手</el-tab-pane>
      <el-tab-pane label="最新音乐" name="six">最新音乐</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
  import PrivateContent from './privateContent/PrivateContent.vue'
  import RecommendSong from './recommendSong/RecommendSong.vue'
  import Carousel from './carousel/Carousel.vue'
  import NewMusic from './newMusic/NewMusic.vue'
  import RecommendMv from './recommendMv/RecommendMv.vue'
  import NewsRadio from './newRadio/NewsRadio.vue'

  export default {
    data() {
      return {
        tabName: 'first',
      }
    },
    methods: {},
    components: {
      PrivateContent,
      RecommendSong,
      Carousel,
      NewMusic,
      RecommendMv,
      NewsRadio
    }
  }
</script>

<style lang="less" scoped>

  .content {
    display: flex;
    background-color: #ECF5FF;
    width: 700px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 6px 11px 1px rgba(0, 0, 0, 0.06);
    margin: 50px 0;
  }

  .text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    /* 兼容 */
    /* line-height: 1.5;
    max-height: 4.5em; */
    overflow: hidden;
    position: relative;
  }

  .text::before {
    content: '';
    float: right;
    width: 0px;
    height: calc(100% - 16px);
  }

  /* 兼容火狐和苹果浏览器加上省略号 */
  /* .btn::before {
      content: '...';
      position: absolute;
      left: -10px;
      color: #333;
      transform: translateX(-100%)
  } */
  /* 添加覆盖层，在文字较少时覆盖展开按钮*/
  .text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #ECF5FF;
  }

  .btn {
    border-radius: 5px;
    border: none;
    color: white;
    background-color: #409EFF;
    float: right;
    clear: both;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    padding: 1px 5px;
    cursor: pointer;
  }

  /* 隐藏单选框 */
  .handle {
    display: none;
  }

  .handle:checked + .text {
    /*设置一个足够大的行数*/
    -webkit-line-clamp: 999;
    /* 兼容 */
    /* max-height: none; */
  }

  .btn::after {
    /*生成文字*/
    content: '展开'
  }

  .handle:checked + .text .btn::after {
    /*生成文字*/
    content: '收起'
  }

  /* 在展开时隐藏覆盖层 */
  .handle:checked + .text::after {
    visibility: hidden;
  }


  :deep(.el-tabs__item.is-active) {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  .el-tabs {
    padding-left: 30px;
    padding-top: 10px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }

  :deep(.el-tabs__item) {
    font-size: 16px;
    color: rgba(0, 0, 0, .8);
  }

  :deep(.el-tabs__item:hover) {
    color: rgba(0, 0, 0, 1);
  }

  :deep(.el-tabs__active-bar) {
    background-color: #EC4141;
    height: 3px;
    border-radius: 50px;
  }

  :deep(.el-card__body) {
    padding-top: 0;
    padding-bottom: 20px;
    padding-right: 20px;
  }


</style>
